<template>
    <div class="right1Child2" >
        <div class="child-content-title">
            <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
            用户漏斗模型
        </div>
        <div >
            <div id="right1Child2Chart"></div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { echartLoad, toDecimalNoZero } from "@/utils";
import Right1childVue from "../child/right1child.vue";
@Component({
    name: "home",
    components: {Right1childVue},
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    dataList: any[] = [];
    chart: any = null;
    mounted() {
         this.setPageData();
    }
    setPageData() {
        if (!this.pageData) return;
        this.dataList = [
            { name: "注册", val: this.pageData.registeredUsers||0 },
            { name: "咨询", val: this.pageData.consultUsers||0 },
            { name: "领取优惠", val: this.pageData.couponReceiveUsers||0 },
            { name: "购买", val: this.pageData.purchaseUsers||0 },
        ];
        
        echartLoad(() => {
            this.setChart();
        });
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }
   
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("right1Child2Chart");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            color: ["#F33700", "#EAC618", "#EF9F1B", "#A8DC19", "#04CB79"],
            grid: {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
            },

            tooltip: {
                trigger: "item",
                formatter: "{b} : {c}",
            },
            legend: [
                {
                    data: ["注册", "领取优惠"], // 左侧显示的图例项
                    left: "5%", // 左侧定位
                    orient: "vertical", // 垂直排列
                    align: "left", // 文本左对齐
                    bottom: "20%", // 垂直居中

                    // 图例图形样式
                    itemWidth: 12, // 图例图标宽度
                    itemHeight: 12, // 图例图标高度
                    itemGap: 15, // 图例项间隔
                    itemStyle: {
                        borderWidth: 0, // 边框粗细
                        opacity: 1,
                    },

                    // 文字样式
                    textStyle: {
                        color: "#fff", // 文字颜色
                        fontSize: 14, // 字体大小
                    },
                    formatter: (name) => {
                        const dataItem = this.dataList.find((item) => item.name === name);
                        return `${name} ${dataItem.val}`;
                    },
                },
                {
                    data: ["咨询", "购买"], // 右侧显示的图例项
                    right: "5%", // 右侧定位
                    orient: "vertical", // 垂直排列
                    align: "left", // 文本左对齐
                    bottom: "20%", // 垂直居中
                    // 图例图形样式
                    itemWidth: 12, // 图例图标宽度
                    itemHeight: 12, // 图例图标高度
                    itemGap: 15, // 图例项间隔
                    itemStyle: {
                        borderWidth: 0, // 边框粗细
                        opacity: 1,
                    },

                    // 文字样式
                    textStyle: {
                        color: "#fff", // 文字颜色
                        fontSize: 14, // 字体大小
                    },
                    formatter: (name) => {
                        const dataItem = this.dataList.find((item) => item.name === name);
                        return `${name} ${dataItem.val}`;
                    },
                },
            ],
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return [
            {
                name: "",
                type: "funnel",
                left: "20%",
                width: "60%",
                silent: true,
                top: 30,
                bottom: 30,
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                itemStyle: {
                    opacity: 0.2,
                },
                emphasis: {
                    show: false,
                },
                data: this.dataList.map((item, idx) => {
                    return {
                        value: (3 - idx + 1) * 20,
                        name: item.name,
                    };
                }),
            },
            {
                name: "保税区投资额",
                type: "funnel",
                left: "20%",
                width: "60%",
                maxSize: "80%",
                top: 30,
                bottom: 30,
                label: {
                    position: "inside",
                    formatter: "{c}",
                    color: "#fff",
                },
                itemStyle: {
                    opacity: 0.7,
                    borderColor: function (params) {
                        return params.color; // params.color 是当前数据项的颜色
                    },
                    borderWidth: 1,
                },
                emphasis: {
                    label: {
                        position: "inside",
                        formatter: "{c}",
                    },
                },
                data: this.dataList.map((item) => {
                    return {
                        value: item.val,
                        name: item.name,
                    };
                }),
                // Ensure outer shape will not be over inner shape when hover.
                z: 100,
            },
        ];
    }
}
</script>
<style lang="scss">
.right1Child2 {
    width: 100%;
    #right1Child2Chart {
        width: 100%;
        height: 200px;
    }
}
</style>
